<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <!-- 
        from类名 layui-form
        方形格式 layui-form-pane  复选框/开关/单选框 这些组合在该风格下需要 layui-form-item 额外添加 pane属性（否则会看起来比较别扭）
        依赖加载模块 form 
       -->
      <form lay-filter="formform" class="layui-form layui-form-pane">
        <!-- 
            每一项 form-item
           -->
        <div class="layui-form-item">
          <label class="layui-form-label">输入框</label>
          <div class="layui-input-block">
            <input
              class="layui-input"
              lay-verify="required|username"
              type="text"
              name="title"
              required
              placeholder="请输入标题"
              autocomplete="off"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密码框</label>
          <div class="layui-input-inline">
            <input class="layui-input" lay-verify="pass" type="password" name="password" required placeholder="请输入密码" />
          </div>
          <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">选择框</label>
          <div class="layui-input-block">
            <!-- 下拉框分组 开启搜索功能 -->
            <select lay-filter="demoSelect" name="city" lay-verify="required" lay-search>
              <option value=""></option>
              <optgroup label="城市">
                <option value="1">郑州</option>
                <option value="2" disabled>上海</option>
                <option value="3" selected>漯河</option>
              </optgroup>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">复选框</label>
          <div class="layui-input-block">
            <input lay-filter="demoCheckbox" type="checkbox" name="write" title="写作" value="111" />
            <input lay-filter="demoCheckbox" type="checkbox" name="read" title="阅读" value="222" checked />
            <!-- 原始风格的复选框 -->
            <input type="checkbox" name="song" title="唱歌" lay-skin="primary" />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">开关</label>
          <div class="layui-input-block">
            <!-- lay-text 自定义开关文字 -->
            <input lay-filter="demoSwitch" type="checkbox" name="switch" title="开关" lay-skin="switch" lay-text="你|好\(^o^)/~" />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">单选框</label>
          <div class="layui-input-block">
            <input lay-filter="demoRadio" type="radio" name="sex" title="男" value="男" />
            <input lay-filter="demoRadio" type="radio" name="sex" title="女" value="女" checked />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">文本域</label>
          <div class="layui-input-block">
            <textarea class="layui-textarea" name="textarea" placeholder="文本域"></textarea>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">文本1</label>
            <div class="layui-input-inline">
              <input class="layui-input" name="tet1" placeholder="文本1" />
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">文本2</label>
            <div class="layui-input-inline">
              <input class="layui-input" name="tet12" placeholder="文本2" />
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-filter="formDemo" lay-submit>立即提交</button>
            <button class="layui-btn layui-btn-primary" type="reset">重置</button>

            <button id="setValue" class="layui-btn layui-btn-primary">赋值</button>
            <button id="getValue" class="layui-btn layui-btn-primary">取值</button>
          </div>
        </div>
      </form>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use(["form"], function () {
        var form = layui.form,
          $ = layui.$;

        /***
         * 更新渲染
         * form.render(); //更新全部
         * form.render("select"); //刷新select选择框渲染
         * form.render("select", "demoForm"); //刷新 lay-filter="demoForm" select选择框渲染
         *
         */

        /***
         * 预设元素属性
         * title	任意字符	设定元素名称，一般用于checkbox、radio框
         * lay-skin	switch（开关风格） primary（原始风格）	定义元素的风格，目前只对 checkbox 元素有效，可将其转变为开关样式
         * lay-ignore	任意字符或不设值	是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格
         * lay-filter	任意字符	事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。
         * lay-verify 验证规则 支持多条规则 lay-verify="验证A|验证B"
         *            required（必填项）
                      phone（手机号）
                      email（邮箱）
                      url（网址）
                      number（数字）
                      date（日期）
                      identity（身份证）
         * lay-verType 异常提示层模式。
                       tips（吸附层）
                       alert（对话框）
                       msg（默认）
         * lay-reqText 用于自定义必填项（即设定了 lay-verify="required" 的表单）的提示文本 
         * lay-submit 绑定触发提交的元素，如button
         */
        // 自定义验证
        form.verify({
          username: function (value, item) {
            //value：表单的值、item：表单的DOM对象
            if (!/^[\S]{6,12}$/.test(value)) {
              return "用户名必须6到12位，且不能出现空格";
            }
          },
          //我们既支持上述函数式的方式，也支持下述数组的形式
          //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
          pass: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
        });
        /***
         * 事件触发 form.on('event(lay-filter)', callback);
         * event 参数列表 select checkbox switch radio submit
         * 默认情况下，事件所触发的是全部的form模块元素，但如果你只想触发某一个元素，使用事件过滤器即可。
         *
         */

        // 触发select选择
        form.on("select(demoSelect)", function (data) {
          console.log(data.elem); //得到select原始DOM对象
          console.log(data.value); //得到被选中的值
          console.log(data.othis); //得到美化后的DOM对象
        });
        // 触发checkbox复选
        form.on("checkbox(demoCheckbox)", function (data) {
          console.log(data.elem); //得到checkbox原始DOM对象
          console.log(data.elem.checked); //是否被选中，true或者false
          console.log(data.value); //复选框value值，也可以通过data.elem.value得到
          console.log(data.othis); //得到美化后的DOM对象
        });
        // 触发switch开关
        form.on("switch(demoSwitch)", function (data) {
          console.log(data.elem); //得到checkbox原始DOM对象
          console.log(data.elem.checked); //开关是否开启，true或者false
          console.log(data.value); //开关value值，也可以通过data.elem.value得到
          console.log(data.othis); //得到美化后的DOM对象
        });
        // 触发radio单选
        form.on("radio(demoRadio)", function (data) {
          console.log(data.elem); //得到radio原始DOM对象
          console.log(data.value); //被点击的radio的value值
        });
        // 触发submit提交
        // 按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：
        form.on("submit(formDemo)", function (data) {
          console.log(data.elem); //被执行事件的元素DOM对象，一般为button对象
          console.log(data.form); //被执行提交的form对象，一般在存在form标签时才会返回
          console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
          return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        // 表单赋值
        $("#setValue").on("click", function () {
          form.val("formform", {
            title: "标题11",
            password: "pas123",
            city: 1, // select 下拉框
            write: true, // checkbox 复选框
            read: false, // checkbox 复选框
            switch: false, // switch 开关
            sex: "男", // radio 单选框
          });
          return false;
        });
        // 表单取值
        $("#getValue").on("click", function () {
          //获取表单区域所有值 2.5.5+
          console.log(form.val("formform"));
          return false;
        });
      });
    </script>
  </body>
</html>
